<html>

<head>
    <title>绘制旋转的四方体，并自动隐藏正面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }

        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display: block;
            color: #ffffff
        }
    </style>
</head>

<body>
</body>
<script src="three/build/three.js"></script>
<script>
    // 获取浏览器窗口的宽高，后续会用
    var w = window.innerWidth
    var h = window.innerHeight
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 800);
    // 设置摄像机位置，并将其朝向场景中心
    camera.position.x = 0
    camera.position.y = 10
    camera.position.z = 30
    camera.lookAt(scene.position)
    var renderer = new THREE.WebGLRenderer({
        antialias: true //是否开启抗锯齿
    })
    renderer.setClearColor(0xffffff)
    renderer.setSize(w, h)

    document.body.appendChild(renderer.domElement)

    //创建内部立方体
    var innerBoxGeomerty = new THREE.BoxGeometry(4, 4, 4)
    var innerBoxMaterial = new THREE.MeshNormalMaterial({
        flatShading: THREE.FlaShading,
        side: THREE.DoubleSide
    })

    var innerBox = new THREE.Mesh(innerBoxGeomerty, innerBoxMaterial)
    innerBox.position.y = -2.9
    scene.add(innerBox)

    var boxGeometry = new THREE.BoxGeometry(10,10,10)

    var materials = [
        new THREE.MeshBasicMaterial({color:0xff0000}),
        new THREE.MeshBasicMaterial({color:0x00ff00}),
        new THREE.MeshBasicMaterial({color:0x0000ff}),
        new THREE.MeshBasicMaterial({color:0x000000}),

        new THREE.MeshBasicMaterial({color:0x00ffff},{transparent:true,opacity:1}),
        new THREE.MeshBasicMaterial({color:0xff0000}),
    ]
    
    for (let i = 0; i < materials.length; i++) {
        const material = materials[i]
        //定义需要渲染的一面，值为常量，默认为THREE.FrontSide。其他选项有THREE.BackSide和THREE.DoubleSide。
        material.side = THREE.BackSide 
        //material.needsUpdate = true //关于：needsUpdate    http://www.php.cn/html5-tutorial-6600.html
    }

    var boxMesh = new THREE.Mesh(boxGeometry,materials)
    scene.add(boxMesh)

    render()
    function render() {
        // 渲染，即摄像机拍下此刻的场景
        renderer.render(scene, camera)

        boxMesh.rotation.y += 0.01
        innerBox.rotation.y += 0.01
        requestAnimationFrame(render)
    }
</script>

</html>